<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城Web</title>
    <link rel="stylesheet" href="./css/index.css" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <header>
        <a></a>
        <nav>
            <ul>
                <li>

                    <a href="">小米商城</a>
                </li>
                <li><a href="">MIUI</a></li>
                <li><a href="">loT</a></li>
                <li><a href="">云服务</a></li>
                <li><a href="">天星科技</a></li>
                <li><a href="">有品</a></li>
                <li><a href="">小爱开发平台</a></li>
                <li><a href="">企业团购</a></li>
                <li><a href="">资质证照</a></li>
                <li><a href="">协议规则</a></li>
                <li>
                    <a href="https://www.mi.com/appdownload" id='download-app'>
                        下载app
                    </a>
                    <a href="https://www.mi.com/appdownload">
                        <div id='app-qrcode'>
                            <img src='./imgs/qrcode_mi.png' />
                        </div>
                    </a>

                </li>
                <li><a href="">智能生活</a></li>
                <li><a href="">Select Location</a></li>
            </ul>

            <div class="btns">
                <a href="">登录</a>
                <a href="">注册</a>
                <a href="">消息通知</a>
                <div class="shopping-car">
                    <div>
                        <i class="fa fa-shopping-cart"><span>购物车(0)</span></i>
                    </div>
                    <div>
                        <div>购物车中还没有商品，赶紧选购吧！</div>
                    </div>
                </div>
            </div>
        </nav>
        <div class="links">
            <a href="https://www.mi.com/index.html">
            </a>
            <ul>
                <li>
                    <a href="">小米手机</a>
                    <div>
                        <ul>
                            <li>
                                <img src="./imgs/mi11.webp" />
                                <span class="name">小米11</span>
                                <span class="price">3999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/mi11.webp" />
                                <span class="name">小米11</span>
                                <span class="price">3999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/mi11.webp" />
                                <span class="name">小米11</span>
                                <span class="price">3999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/mi11.webp" />
                                <span class="name">小米11</span>
                                <span class="price">3999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/mi11.webp" />
                                <span class="name">小米11</span>
                                <span class="price">3999元起</span>
                            </li>
                        </ul>
                    </div>
                </li>

                <li>
                    <a href="">Redmi 红米</a>
                    <div>
                        <ul>
                            <li>
                                <img src="./imgs/Redmi.webp" />
                                <span class="name">Redmi K40</span>
                                <span class="price">1999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/Redmi.webp" />
                                <span class="name">Redmi K40</span>
                                <span class="price">1999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/Redmi.webp" />
                                <span class="name">Redmi K40</span>
                                <span class="price">1999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/Redmi.webp" />
                                <span class="name">Redmi K40</span>
                                <span class="price">1999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/Redmi.webp" />
                                <span class="name">Redmi K40</span>
                                <span class="price">1999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/Redmi.webp" />
                                <span class="name">Redmi K40</span>
                                <span class="price">1999元起</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="">电视</a>
                    <div>
                        <ul>
                            <li>
                                <img src="./imgs/小米电视.webp" />
                                <span class="name">小米电视大师 82英寸</span>
                                <span class="price">9999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/小米电视.webp" />
                                <span class="name">小米电视大师 82英寸</span>
                                <span class="price">9999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/小米电视.webp" />
                                <span class="name">小米电视大师 82英寸</span>
                                <span class="price">9999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/小米电视.webp" />
                                <span class="name">小米电视大师 82英寸</span>
                                <span class="price">9999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/小米电视.webp" />
                                <span class="name">小米电视大师 82英寸</span>
                                <span class="price">9999元起</span>
                            </li>
                            <li>
                                <img src="./imgs/小米电视.webp" />
                                <span class="name">小米电视大师 82英寸</span>
                                <span class="price">9999元起</span>
                            </li>

                        </ul>
                    </div>
                </li>
                <li>
                    <a href="">笔记本</a>
                    <div>
                        <ul>
                            <li>
                                <img src="./imgs/笔记本二.webp" />
                                <span class="name">RedmiBook 16</span>
                                <span class="price">4699元起</span>
                            </li>
                            <li>
                                <img src="./imgs/笔记本二.webp" />
                                <span class="name">RedmiBook 16</span>
                                <span class="price">4699元起</span>
                            </li>
                            <li>
                                <img src="./imgs/笔记本二.webp" />
                                <span class="name">RedmiBook 16</span>
                                <span class="price">4699元起</span>
                            </li>
                            <li>
                                <img src="./imgs/笔记本二.webp" />
                                <span class="name">RedmiBook 16</span>
                                <span class="price">4699元起</span>
                            </li>
                            <li>
                                <img src="./imgs/笔记本二.webp" />
                                <span class="name">RedmiBook 16</span>
                                <span class="price">4699元起</span>
                            </li>
                            <li>
                                <img src="./imgs/笔记本二.webp" />
                                <span class="name">RedmiBook 16</span>
                                <span class="price">4699元起</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="">家电</a>
                    <div>
                        <ul>
                            <li>
                                <img src="./imgs/家电.png" />
                                <span class="name">米家互联网洗烘一体机10kg</span>
                                <span class="price">1899元</span>
                            </li>
                            <li>
                                <img src="./imgs/家电.png" />
                                <span class="name">米家互联网洗烘一体机10kg</span>
                                <span class="price">1899元</span>
                            </li>
                            <li>
                                <img src="./imgs/家电.png" />
                                <span class="name">米家互联网洗烘一体机10kg</span>
                                <span class="price">1899元</span>
                            </li>
                            <li>
                                <img src="./imgs/家电.png" />
                                <span class="name">米家互联网洗烘一体机10kg</span>
                                <span class="price">1899元</span>
                            </li>
                            <li>
                                <img src="./imgs/家电.png" />
                                <span class="name">米家互联网洗烘一体机10kg</span>
                                <span class="price">1899元</span>
                            </li>
                            <li>
                                <img src="./imgs/家电.png" />
                                <span class="name">米家互联网洗烘一体机10kg</span>
                                <span class="price">1899元</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="">路由器</a>
                    <div>
                        <ul>
                            <li>
                                <img src="./imgs/路由器.webp" />
                                <span class="name">小米路由器AX6000</span>
                                <span class="price">599元</span>
                            </li>
                            <li>
                                <img src="./imgs/路由器.webp" />
                                <span class="name">小米路由器AX6000</span>
                                <span class="price">599元</span>
                            </li>
                            <li>
                                <img src="./imgs/路由器.webp" />
                                <span class="name">小米路由器AX6000</span>
                                <span class="price">599元</span>
                            </li>
                            <li>
                                <img src="./imgs/路由器.webp" />
                                <span class="name">小米路由器AX6000</span>
                                <span class="price">599元</span>
                            </li>
                            <li>
                                <img src="./imgs/路由器.webp" />
                                <span class="name">小米路由器AX6000</span>
                                <span class="price">599元</span>
                            </li>
                            <li>
                                <img src="./imgs/路由器.webp" />
                                <span class="name">小米路由器AX6000</span>
                                <span class="price">599元</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="">智能硬件</a>
                    <div>
                        <ul>
                            <li>
                                <img src="./imgs/智能硬件.jpg" />
                                <span class="name">小米小爱触屏音箱</span>
                                <span class="price">219元</span>
                            </li>
                            <li>
                                <img src="./imgs/智能硬件.jpg" />
                                <span class="name">小米小爱触屏音箱</span>
                                <span class="price">219元</span>
                            </li>
                            <li>
                                <img src="./imgs/智能硬件.jpg" />
                                <span class="name">小米小爱触屏音箱</span>
                                <span class="price">219元</span>
                            </li>
                            <li>
                                <img src="./imgs/智能硬件.jpg" />
                                <span class="name">小米小爱触屏音箱</span>
                                <span class="price">219元</span>
                            </li>
                            <li>
                                <img src="./imgs/智能硬件.jpg" />
                                <span class="name">小米小爱触屏音箱</span>
                                <span class="price">219元</span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="">服务</a>
                </li>
                <li>
                    <a href="">社区</a>
                </li>
            </ul>
            <div>
                <input placeholder="Redmi 新品媒体测评" />
                <i class="fa fa-search"></i>
            </div>
        </div>
    </header>
    <div>
        <main>
            <div class="main-left">
                <div>
                    <span>手机 电话卡</span>
                    <i class="fa fa-angle-right"></i>
                </div>
                <div>
                    <span>电视 盒子</span>
                    <i class="fa fa-angle-right"></i>
                </div>
                <div>
                    <span>笔记本 显示器</span>
                    <i class="fa fa-angle-right"></i>
                </div>
                <div>
                    <span>家电 插线板</span>
                    <i class="fa fa-angle-right"></i>
                </div>
                <div>
                    <span>出行 穿戴</span>
                    <i class="fa fa-angle-right"></i>
                </div>
                <div>
                    <span>智能 路由器</span>
                    <i class="fa fa-angle-right"></i>
                </div>
                <div>
                    <span>电源 配件</span>
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
            <div class="swiper">
                <ul>
                    <li>
                        <a><img src="./imgs/swiper1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a><img src="./imgs/swiper2.webp" alt=""></a>
                    </li>
                    <li>
                        <a><img src="./imgs/swiper3.webp" alt=""></a>
                    </li>
                    <li>
                        <a><img src="./imgs/swiper4.webp" alt=""></a>
                    </li>
                    <li>
                        <a><img src="./imgs/swiper5.webp" alt=""></a>
                    </li>
                    <li>
                        <a><img src="./imgs/swiper1.jpg" alt=""></a>
                    </li>
                </ul>
            </div>

        </main>
        <div class="cardgroup">
            <div>
                <li>
                    <a></a>
                </li>
                <li>
                    <a></a>
                </li>
                <li>
                    <a></a>
                </li>
                <li>
                    <a></a>
                </li>
                <li>
                    <a></a>
                </li>
                <li>
                    <a></a>
                </li>
            </div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="mi-second">
            <div>
                <div class="title">
                    <span>小米秒杀</span>
                    <div class="btns">
                        <i class="fa fa-angle-left"></i>
                        <i class="fa fa-angle-right"></i>
                    </div>
                </div>
                <div>
                    <div>
                        <span>14:00 场</span>
                        <i class="fa fa-flash fa-3x"></i>
                        <span>距离结束还有</span>
                        <div>
                            <span class="hour">03</span> :
                            <span class="minute">42</span> :
                            <span class="second">56</span>
                        </div>
                    </div>
                    <div>
                        <div class="thump">
                            <img src='./imgs/mi-content1.webp' />
                        </div>
                        <h3 class="title">小米台式净饮机 白色</h3>
                        <p class="desc">即滤即热，乐享鲜活纯净水</p>
                        <p class="price">
                            <span>1299</span>元
                            <del>1499元</del>
                        </p>
                    </div>
                    <div>
                        <div class="thump">
                            <img src='./imgs/mi-content2.webp' />
                        </div>
                        <h3 class="title">小爱老师 4G版 白色</h3>
                        <p class="desc">英语提分利器</p>
                        <p class="price">
                            <span>799</span>元
                            <del>999元</del>
                        </p>
                    </div>
                    <div>
                        <div class="thump">
                            <img src='./imgs/mi-content3.webp' />
                        </div>
                        <h3 class="title">小米全面屏电视43英寸 E43K 黑色 43英寸</h3>
                        <p class="desc">全面屏设计，海量内容</p>
                        <p class="price">
                            <span>1299</span>元
                            <del>1399元</del>
                        </p>
                    </div>
                    <div>
                        <div class="thump">
                            <img src='./imgs/mi-content4.webp' />
                        </div>
                        <h3 class="title">小米无线鼠标 Lite 黑色</h3>
                        <p class="desc">简约设计，轻盈握感</p>
                        <p class="price">
                            <span>29</span>元
                            <del>39元</del>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <a class="banner" href="">
            <img src="./imgs/banner-img1.webp" />
        </a>
        <div class="mi-phone">
            <div>
                <div class="title">
                    <span>手机</span>
                    <div class="btns">
                        <span>查看全部</span>
                        <i class="fa fa-chevron-circle-right"></i>
                    </div>
                </div>
                <div>
                    <div class="left">
                        <a href=""><img src="./imgs/手机1.webp" /></a>
                    </div>
                    <div class="right">
                        <div>
                            <div class="thump">
                                <img src='./imgs/手机2.webp' />
                            </div>
                            <h3 class="title">Redmi K40 Pro 系列</h3>
                            <p class="desc">骁龙888 / E4 旗舰直屏</p>
                            <p class="price">
                                <span>2799</span>元起
                            </p>
                        </div>
                        <div>
                            <div class="thump">
                                <img src='./imgs/手机2.webp' />
                            </div>
                            <h3 class="title">Redmi K40 Pro 系列</h3>
                            <p class="desc">骁龙888 / E4 旗舰直屏</p>
                            <p class="price">
                                <span>2799</span>元起
                            </p>
                        </div>
                        <div>
                            <div class="thump">
                                <img src='./imgs/手机2.webp' />
                            </div>
                            <h3 class="title">Redmi K40 Pro 系列</h3>
                            <p class="desc">骁龙888 / E4 旗舰直屏</p>
                            <p class="price">
                                <span>2799</span>元起
                            </p>
                        </div>
                        <div>
                            <div class="thump">
                                <img src='./imgs/手机2.webp' />
                            </div>
                            <h3 class="title">Redmi K40 Pro 系列</h3>
                            <p class="desc">骁龙888 / E4 旗舰直屏</p>
                            <p class="price">
                                <span>2799</span>元起
                            </p>
                        </div>
                        <div>
                            <div class="thump">
                                <img src='./imgs/手机2.webp' />
                            </div>
                            <h3 class="title">Redmi K40 Pro 系列</h3>
                            <p class="desc">骁龙888 / E4 旗舰直屏</p>
                            <p class="price">
                                <span>2799</span>元起
                            </p>
                        </div>
                        <div>
                            <div class="thump">
                                <img src='./imgs/手机2.webp' />
                            </div>
                            <h3 class="title">Redmi K40 Pro 系列</h3>
                            <p class="desc">骁龙888 / E4 旗舰直屏</p>
                            <p class="price">
                                <span>2799</span>元起
                            </p>
                        </div>
                        <div>
                            <div class="thump">
                                <img src='./imgs/手机2.webp' />
                            </div>
                            <h3 class="title">Redmi K40 Pro 系列</h3>
                            <p class="desc">骁龙888 / E4 旗舰直屏</p>
                            <p class="price">
                                <span>2799</span>元起
                            </p>
                        </div>
                        <div>
                            <div class="thump">
                                <img src='./imgs/手机2.webp' />
                            </div>
                            <h3 class="title">Redmi K40 Pro 系列</h3>
                            <p class="desc">骁龙888 / E4 旗舰直屏</p>
                            <p class="price">
                                <span>2799</span>元起
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <footer>
        <ul>
            <li>
                <i class="fa fa-wrench fa-2x"></i>
                <a>预约维修服务</a>
            </li>
            <li>
                <i class="fa fa-wrench fa-2x"></i>
                <a>7天无理由退货</a>
            </li>
            <li>
                <i class="fa fa-wrench fa-2x"></i>
                <a>15天免费换货</a>
            </li>
            <li>
                <i class="fa fa-wrench fa-2x"></i>
                <a>满99元包邮</a>
            </li>
            <li>
                <i class="fa fa-wrench fa-2x"></i>
                <a>520余家售后网点</a>
            </li>
        </ul>
        <div class="footer-links">
            <div>
                <div>帮助中心</div>
                <div>
                    <p>账户管理</p>
                    <p>购物指南</p>
                    <p>订单操作</p>
                </div>
            </div>
            <div>
                <div>服务支持</div>
                <div>
                    <p>售后政策</p>
                    <p>自助服务</p>
                    <p>相关下载</p>
                </div>
            </div>
            <div>
                <div>线下门店</div>
                <div>
                    <p>售后政策</p>
                    <p>自助服务</p>
                    <p>相关下载</p>
                </div>
            </div>
            <div>
                <div>关于小米</div>
                <div>
                    <p>了解小米</p>
                    <p>加入小米</p>
                    <p>投资者关系</p>
                    <p>企业社会责任</p>
                    <p>廉洁举报</p>
                </div>
            </div>
            <div>
                <div>关注我们</div>
                <div>
                    <p>新浪微博</p>
                    <p>官方微信</p>
                    <p>联系我们</p>
                    <p>公益基金会</p>
                </div>
            </div>
            <div>
                <div>特色服务</div>
                <div>
                    <p>F码通道</p>
                    <p>礼物码</p>
                    <p>防伪查询</p>
                </div>
            </div>
            <div>
                <p>400-100-5678</p>
                <p>8:00-18:00(仅收市话费)</p>
                <a href="">
                    <i class="fa fa-commenting"></i>
                    <span>人工客服</span>
                </a>
                <p>
                    <span>关注小米:</span>
                    <i class="fa fa-wechat"></i>
                    <i class="fa fa-weibo"></i>

                </p>
            </div>
        </div>
        <div class="site-info">
            <img src="./imgs/mi-logo.png" />
            <div>
                <p>小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | Select Location北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会</p>
                <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号 （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告 增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证 违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
                <div class="partners">

                </div>
            </div>
        </div>
    </footer>
</body>

</html>